<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  </head>
  
  <body style="width:100%;height:100%">
    <div style="width:200px">
        <p><span>使用$("foo").end()方法</span></p>
        <p><span><input type="text" placeholder="触发页面点击事件"></span></p>
        <p><span>使用$("foo").end()方法</span></p>
    </div>
    <div style="width:400px;height:50px">
        
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            //jQuery在进行链式操作的时候，实际上进行的是对象的入栈出栈操作，.end()方法执行的是出操作
            $("div:first")
                .find("p")
                .find("span")
                .eq(0)
                .end()
                .end()
                .end()
                .css("border", "1px solid red");
            //如果需要让body占满全屏，无法通过设置width height 100%来实现
            //必须先取得页面的具体大小值
            $("body").click(function(event) {
                //.html取得dom的里面的所有内容
                $("span:first").html("点击了页面");
                //.text只取得dom里面的文本内容，不取标签
                $("span:last").text("点击了页面");
                //.val只能用于设置表单元素的值
                $("span input[type='text']:first").val("点击了页面");
                
                //如果只需要移动到单个元素，则执行一定操作，如果十多个元素，则会复制
                //appendTo追加到元素里面的最后面
                $("p:first").appendTo($("div").eq(1).text("appendTo"));
                //prependTo是追加的元素里面的最前面
                $("p:first").prependTo($("div").eq(1).text("prepend"));
                //insertAfter插入到被选择元素的后面
                $("p:first").insertAfter($("div:last").eq(1).text("insertAfter"));
                //克隆
                $("div:first").clone().insertAfter($("div:last"));
                //detach会保留所有事件、元素，返回移除的元素
                var x = $("a:first").detach();
                //remove会全部移除不返回任何东西
                $("a:last").remove();
            });
            var myItems = [];
            for (var i = 0; i < 100; i++) {
                myItems.push($("<a/>", {
                    html: "百度",
                    "class": "id" + i,
                    href: "http://www.baidu.com"
                }));
            }
            //append方法可以一次添加多个
            //appendTo只能一次追加一个
            //join方法默认使用，号分割，如果指定""则不存在分隔符
            $("body").append(myItems);
        });
    </script>
  </body>
</html>
